<template>
  <div id="app">
    <div class="box">
      <h3 v-color>App根组件</h3>
      <hr />
      <!-- <Left></Left> -->
      <!-- <Right></Right>  -->
      <button @click="left">展示Left</button>
      <button @click="right">展示Right</button>
      <!-- include指定缓存 -->
      <!--  include="Left" -->
      <!-- exclude反过来 -->
      <keep-alive include="Left">
        <component v-if="show" :is="LeftName"></component>
        <component v-else :is="RightName"></component>
      </keep-alive>
      <Test>
        <!-- name对应渲染 -->
        <!-- template是虚拟的,页面没有渲染出来 -->
        <!-- v-slot:简写# -->
        <template #default>
          <button>按钮</button>
        </template>
        <!-- 作用域插槽，后面是形参 -->
        <template #default1="scope">
          <p>我是第二个具名·插槽</p>
          {{ scope.msg }}
        </template>
        <!-- 解构赋值 -->
        <template #default2="{msg,user}">
          <p>我是第三个具名·插槽</p>
          {{ user }}
        </template>
      </Test>
    </div>
  </div>
</template>

<script>
//导入需要使用的vue组件
import Left from "./components/left.vue";
import Right from "./components/right.vue";
import Test from "./components/Test.vue";
import Refs from "./components/refs.vue";
export default {
  name: "App",
  data() {
    return {
      LeftName: "Left",
      RightName: "Right",
      show: true,
    };
  },
  methods: {
    left() {
      this.show = true;
    },
    right() {
      this.show = false;
    },
  },
  directives:{
    color:{
      bind(el) {
        el.style.color = 'red'
      }
    }
  },
  components: {
    Left,
    Right,
    Test,
    Refs,
  },
};
</script>

<style lang="less">
* {
  padding: 0;
  margin: 0;
}
h1 {
  margin: 10px;
}
.box {
  background-color: #ccc;
  height: 500px;
}
.box-zi {
  display: flex;
}
hr {
  margin-bottom: 5px;
}
</style>
